.login-container {
  width: 100vw;
  height: 100vh;
  background-color: #222;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-card {
    width: 20vw;
    height: 50vh;
    .login-logo {
      margin-bottom: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      h1 {
        color: #333;
        font-family: Arial, Helvetica, sans-serif;
        padding: 0;
        margin: 0;
        font-size: 4rem;
        position: relative;
      }
      h1::after {
          content: "王者荣耀";
          position: absolute;
          color: transparent;
          left: 0;
          top: 0;
          clip-path: ellipse(50px 50px at 0% 50%);
          -webkit-clip-path: ellipse(100px 100px at 0% 50%);
          animation: spotlight 5s infinite;
          background-image: url(https://images.unsplash.com/photo-1579547621869-0ddb5f237392?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);
          background-position: center center;
          background-size: 150%;
          -webkit-background-clip: text;
          background-clip: text;
      }
      @keyframes spotlight {
          0% {
            clip-path: ellipse(50px 50px at 0% 50%);
          -webkit-clip-path: ellipse(50px 50px at 0% 50%);
          }

          50% {
            clip-path: ellipse(50px 50px at 100% 50%);
          -webkit-clip-path: ellipse(50px 50px at 100% 50%);
          }

          100% {
            clip-path: ellipse(50px 50px at 0% 50%);
          -webkit-clip-path: ellipse(50px 50px at 0% 50%);
          }
      }
    }
  }
}
